<template>
  <div class="search">
        <form action="/">
           <van-search
             v-model="value"
             show-action
             placeholder="请输入搜索关键词"
             @search="onSearch"
             @cancel="onCancel"
           />
        </form>
        <router-view></router-view>
      <div class="personsuo">
          <div class="lishisou" v-if="this.histroys.length!=0">
              <p>历史记录</p>
              <img @click="shanchu" class="img1"  src="../assets/删除.png" alt="">
          </div>
           <div class="lishi" v-if="this.histroys.length!=0">
               <div class="lishiitem" @click="dianlishi(item)" v-for="(item,index) in histroys" :key="index">{{item}}</div>
           </div>
          <div class="personsou">
              <p>大家都在搜</p>
          </div>
          <div class="soutitle">
                <div class="souitem" @click="diansou(item.name)" v-for="(item,index) in soushuo" :key="index">{{item.name}}</div>
         </div>
      </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    created(){
       this.getsearch()
        this.showHotSearch();
    },
   data(){
       return{
            value: '',
            soushuo:[],
            histroys:[],
            
            
       }
   },
   methods:{
       //点击搜索
       diansou(name){
         this.addHotSearch(name)
          this.$router.push({name:'searchitem',query:{name:name}})
       },
       //点击历史
       dianlishi(name){
           this.$router.push({name:'searchitem',query:{name:name}})
       },
        shanchu(){
          this.histroys=[]
          this.value=" "
          localStorage.removeItem('search')
        },
        onSearch(val) {
           
           this.addHotSearch(val)
           this.$router.push({name:'searchitem',query:{name:val}})
        },
         onCancel() {
           this.$router.push({name:'faxian'})
         },
       getsearch(){
           this.axios({
               method:'get',
               url:'https://apis.netstart.cn/xpc/search/recommend_kws'
           }).then(result=>{
             
               this.soushuo=result.data.data.list
           }).catch(err=>{
               
           })
       },

       
       //获取本地存储
       showHotSearch() {
      var items = localStorage.getItem('search') // 从本地获取
      if (items) {
        items = JSON.parse(items)
        this.histroys = items
      }
       },
       
       //设置本地存储
        addHotSearch(keyword) { 
          keyword = String(keyword)
          var items = this.histroys 
          
          if (items.indexOf(keyword) == -1) { //如果historys中没有，现在搜索的值
            if (items.length >= 10) { // 控制historys这个数组的长度不超过5
              items.pop() 
            }
            items.unshift(keyword) //往数组的前面加上该值
          }
          localStorage.setItem('search', JSON.stringify(items)) //存到本地
        },
   }
}
</script>

<style lang="less" scoped>
.search{
    width: 100%;
}
.personsuo{
    width: 100%;
    .lishisou{
        width: 90%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20px;
        p{
        width: 50%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: rgb(150, 149, 149);
       }
       .img1{
           width: 18px;
           height: 18px;
           margin-top: 0px;
       }
    
    }
    .personsou{
       width: 90%;
       height: 30px;
       margin-top: 20px;
      p{
        width: 50%;
        height: 30px;
        font-size: 14px;
        margin-left: 10px;
        color: rgb(150, 149, 149);
    }
    }
    .soutitle{
        width: 90%;
        height: 180px;
        display: flex;
        flex-wrap: wrap;
        margin-left: 20px;
        .souitem{
            width: 50px;
            height: 30px;
            margin-left: 10px;
            line-height: 30px;
            margin-top: 10px;
            border-radius: 5px;
            background-color: rgb(247,247,247);
            text-align: center;
        }
    }
    .lishi{
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 20px;
        margin-top: -20px;
         .lishiitem{
           font-size: 14px;
            padding: 5px 10px;
            box-sizing: border-box;
            margin-left: 10px;
            margin-top: 20px;
            border-radius: 5px;
            background-color: rgb(247,247,247);
            text-align: center;
        }
    }
    
}
</style>